<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #drag {
      width: 200px;
      height: 40px;
      background: #aaf;
    }
  </style>
</head>
<body>

<div draggable="true" id="drag">drag video</div>
<iframe src="./children.html" frameborder="0" width="500" height="500"></iframe>
<script>
const $drag = document.querySelector('#drag')

$drag.addEventListener('dragstart', (event) => {
  console.log('dragstart')
  event.dataTransfer.setData('data-source', JSON.stringify({id: 'xxx-xxx', name: 'vvv-vvv'}))
}, false);

window.addEventListener('message', (event) => {
  console.log('root: => ', event)
})
</script>
</body>
</html>